<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello</title>
</head>
<body>

<div id="root"></div>

<script src="../lib/react.js"></script>
<script src="../lib/react-dom.js"></script>
<script src="../lib/babel-min.js"></script>

<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"))
    let message = "hello world"
    const changeText = () => {
      console.log("123");
      //修改数据
      message = "hello react";
      //重新渲染
      rootRender();
    }
    rootRender();
    function rootRender() {
      root.render(
        (
          <div>
            <h2>{message}</h2>
            <button onClick={changeText}>改变文本</button>
          </div>
        )
      )
    }

</script>

</body>
</html>
